<template>
  <div class="content">
    <div class="header">
      <h3 class="title">用户列表</h3>
      <el-button type="primary" @click="handleAdd">新建数据</el-button>
    </div>
    <div class="table">
      <el-table :data="usersList" style="width: 100%" border>
        <el-table-column type="selection" />
        <el-table-column type="index" label="序号" width="60" align="center" />
        <el-table-column prop="name" label="用户名" width="100" align="center" />
        <el-table-column prop="realname" label="真实姓名" width="100" align="center" />
        <el-table-column prop="cellphone" label="手机号码" align="center" />
        <el-table-column prop="enable" label="状态" align="center">
          <template #default="scope">
            <el-button :type="scope.row.enable ? 'primary' : 'danger'" plain>{{
              scope.row.enable === 0 ? '禁用' : '启用'
            }}</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="createAt" label="创建时间" align="center" width="200">
          <template #default="scope">
            {{ formatUTC(scope.row.createAt) }}
          </template>
        </el-table-column>
        <el-table-column prop="updateAt" label="更新时间" align="center" width="200">
          <template #default="scope">
            {{ formatUTC(scope.row.updateAt) }}
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="180" align="center">
          <template #default="{ row }">
            <el-button type="primary" icon="Edit" size="small" text @click.prevent="editRow(row)">
              编辑
            </el-button>
            <el-button type="danger" icon="Delete" size="small" text @click.prevent="delRow(row)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="footer">
        <el-pagination
          v-model:current-page="currentPage"
          background
          layout="prev, pager, next,total,sizes"
          :page-sizes="[5, 10, 15, 20]"
          :total="usersTotalCount"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <!-- 新增弹窗 -->
    <addModal ref="addModalRef" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { formatUTC } from '@/utils/format'
import { storeToRefs } from 'pinia'
import useSystemStore from '@/store/main/system/system'
import addModal from './user-modal.vue'
// 调用pinia中获取表格数据的接口
const systemStore = useSystemStore()
const currentPage = ref(1)
const pageSize = ref(10)
// 此时tabledata没有数据 是因为接口时异步获取的，而下面的tabledata是同步执行的
// 当执行到tabledata时，还没有数据，因为接口请求还没发起
fetchUsersListData() // 发起请求
// 拿到表格数据
const { usersList, usersTotalCount } = storeToRefs(systemStore)
// 页码相关逻辑

function handleSizeChange() {
  fetchUsersListData()
}
function handleCurrentChange() {
  fetchUsersListData()
}
const addModalRef = ref<InstanceType<typeof addModal>>()
// 新建数据
function handleAdd() {
  addModalRef.value?.open(false)
}
// 编辑
const editRow = (row: any) => {
  addModalRef.value?.open(true, row)
}
// 删除
const delRow = async (row: any) => {
  const id = row.id
  systemStore.deleteUsersListAction(id)
}
// 定义一个函数专门发起网络请求
function fetchUsersListData(formData: any = {}) {
  const size = pageSize.value
  const offset = (currentPage.value - 1) * size
  const info = { size, offset }
  systemStore.postUsersListAction({ ...info, ...formData })
}
defineExpose({ fetchUsersListData })
</script>

<style lang="less" scoped>
.content {
  padding: 15px;
  margin-top: 20px;
  background-color: #fff;
}
.header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 10px;
  .title {
    font-size: 20px;
    font-weight: bold;
  }
}
.footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}
.el-button {
  margin-left: 0;
}
</style>
